<template>
	<div>

		<!-- <div style="background-color: #f4f5f6;padding-top: 33px;margin-top:20px;">
			<el-form ref="form" :inline="true" :model="formInline" label-width="80px">
				<el-form-item label="名称" placeholder="搜索名称/编号进行查询">
					<el-input v-model="formInline.noticeTitle"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fetchData(1)">查询</el-button>
					<el-button @click="clean()">重置</el-button>
				</el-form-item>
			</el-form>
		</div> -->
		<el-row :span="24" style="margin:26px 0 0;">
			<div style="display: flex;justify-content: flex-start;">
				<p @click="navToPlatform()" class="tabHeader">系统公告</p>
				<p class="tabHeader" style="color: #409eff;border-bottom: 0;">规则文案</p>
				<p @click="navToHelpCenter()" class="tabHeader">帮助中心</p>
				<p @click="navToCityNotice()" class="tabHeader">城主公告</p>
				<p @click="navToNew()" class="tabHeader">新闻发布</p>
			</div>
			<el-row style="margin-top: 20px;">
				<el-button @click="addRule('add')" class="btnPad " type="primary">新增</el-button>
				<el-button @click="getRuleList()" :class="[isActive==true?'btnChoose':'btnPad'] " plain>规则管理</el-button>
				<el-button @click="getDealList()" :class="[isActive2==true?'btnChoose':'btnPad'] " plain>协议管理</el-button>
				<el-button @click="getNameInfoList()" :class="[isActive1==true?'btnChoose':'btnPad'] " plain>名词简述</el-button>
				<!-- <el-button @click="getHotelList()" :class="[isActive4==true?'btnChoose':'btnPad'] " plain>酒店推荐</el-button> -->
			</el-row>
			<div style="margin-top: 20px;">
				<el-table v-loading="table_loading" element-table_loading-text="加载中" :data="tableData" stripe style="width: 100%">
					<el-table-column prop="textCode" width="200" label="序号">
					</el-table-column>
					<el-table-column prop="textTitle" label="名称">
					</el-table-column>
					<el-table-column label="操作" width="150">
						<template scope="scope">
							<el-button size="small" type="primary" @click="detail(scope.row)">编辑</el-button>
							<el-button size="small" type="danger" @click="deleteRule(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--模态框-->
				<el-dialog title="编辑文案" v-model="dialogFormVisible">
					<el-form :model="form" ref="ruleForm">
						<el-form-item label="标题:">
							<span>{{ form.textTitle }}</span>
						</el-form-item>
						<el-form-item label="内容:">
							<el-input type="textarea" v-model="form.textContent" :rows="3" style="width: 80%"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" :loading="loading" :disabled=" !form.textContent" @click="submitForm">提 交
						</el-button>
					</div>
				</el-dialog>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isActive: true,
				isActive1: false,
				isActive2: false,
				isActive3: false,
				isActive4: false,
				table_loading: false,
				tableData: [],
				pageInfo: {
					pageNo: 1,
					pageSize: 1,
					totalRows: 1,
					rows: []
				},
				dialogFormVisible: false,
				form: {
					textContent: '',
					textCode: '',
					textTitle: ''
				},
				loading: false,
				activeName: 'arr2'
			}
		},
		created() {

		},
		activated() {
			if (sessionStorage.getItem('ruleText')) {
				if (JSON.parse(sessionStorage.getItem('ruleText')) == 'arr2') {
					this.getRuleList(1)
					sessionStorage.removeItem('ruleText')
				}
				if (JSON.parse(sessionStorage.getItem('ruleText')) == 'arr3') {
					this.getDealList(1)
					sessionStorage.removeItem('ruleText')
				}
				if (JSON.parse(sessionStorage.getItem('ruleText')) == 'arr1') {
					this.getNameInfoList(1)
					sessionStorage.removeItem('ruleText')
				}
			} else {
				this.getRuleList(1)
			}

		},
		mounted() {

		},
		methods: {
			navToCityNotice() {
				this.$router.push('/official/city_notice')
			},
			navToHelpCenter() {
				this.$router.push('/official/help_center')
			},
			navToPlatform() {
				this.$router.push('/official/platform_rule')
			},
			navToNew(){
				this.$router.push('/official/newsl_ist')
			},
			getRuleList(page = 1) {
				let vm = this
				vm.verifyIsActive(1)
				vm.dataApi.ajax('selectSysTextInfo', {
					textType: '1'
				}, res => {
					if (res.responseType === 'S') {
						vm.tableData = res.dtos
					}
				});
				vm.activeName = 'arr2'
				// vm.tableData=vm[vm.activeName]

			},
			verifyIsActive(page) {
				let vm = this
				if (page == 1) {
					vm.isActive = true
					vm.isActive1 = false
					vm.isActive2 = false
				}
				if (page == 2) {
					vm.isActive = false
					vm.isActive1 = false
					vm.isActive2 = true
				}
				if (page == 3) {
					vm.isActive = false
					vm.isActive1 = true
					vm.isActive2 = false
				}
			},
			getDealList(page = 1) {
				let vm = this
				vm.verifyIsActive(2)
				vm.dataApi.ajax('selectSysTextInfo', {
					textType: '2'
				}, res => {
					if (res.responseType === 'S') {
						vm.tableData = res.dtos
					}
				});
				vm.activeName = 'arr3'
			},
			getNameInfoList(page = 1) {
				let vm = this
				vm.verifyIsActive(3)
				vm.dataApi.ajax('selectSysTextInfo', {
					textType: '3'
				}, res => {
					if (res.responseType === 'S') {
						vm.tableData = res.dtos
					}
				});
				vm.activeName = 'arr1'
			},
			addRule() {
				if (this.isActive == true) {
					let id = '1'
					this.$router.push('/official/protocoldetail?id=' + id)
				} else if (this.isActive2 == true) {
					let id = '2'
					this.$router.push('/official/protocoldetail?id=' + id)
				} else if (this.isActive1 == true) {
					let id = '3'
					this.$router.push('/official/protocoldetail?id=' + id)
				}
			},
			deleteRule(data) {
				this.dataApi.ajax('delSysTextInfo', {
					textCode: data.textCode
				}, res => {
					if (res.responseType === 'S') {
						this.showMsg('删除成功')
						if (this.isActive == true) {
							this.getRuleList(1)
						} else if (this.isActive2 == true) {
							this.getDealList(1)
						} else if (this.isActive1 == true) {
							this.getNameInfoList(1)
						}
					}
				});
			},
			detail(item) {
				if (item.textCode == '0000000000') {
					this.fetchData(item.textCode)
					this.dialogFormVisible = true
				} else if (item.textCode == '0000000001') {
					this.fetchData(item.textCode)
					this.dialogFormVisible = true
				} else if (item.textCode == '0000000002') {
					this.fetchData(item.textCode)
					this.dialogFormVisible = true
				} else if (item.textCode == '0000000013') {
					this.fetchData(item.textCode)
					this.dialogFormVisible = true
				} else if (item.textCode == '0000000017') {
					this.fetchData(item.textCode)
					this.dialogFormVisible = true
				} else if (item.textCode == '0000000019') {
					this.fetchData(item.textCode)
					this.dialogFormVisible = true
				} else if (item.textCode == '0000000024') {
					this.fetchData(item.textCode)
					this.dialogFormVisible = true
				} else if (item.textCode == '0000000025') {
					this.fetchData(item.textCode)
					this.dialogFormVisible = true
				} else {
					let isShow = this.activeName
					sessionStorage.setItem('ruleText', JSON.stringify(isShow))
					this.$router.push('/official/protocoldetail?id=' + item.textCode + '&title=' + item.textTitle)

				}
			},
			fetchData(id) {
				this.dataApi.ajax('singleSysTextInfo', {
					textCode: id
				}, res => {
					if (res.responseType === 'S') {
						this.form = res
					}
				});
			},
			submitForm() {
				this.dataApi.ajax('editSysTextInfo', this.form, res => {
					if (res.responseType === 'S') {
						this.showMsg('修改成功')
						this.dialogFormVisible = false
					}
				});
			},
		}
	}
</script>

<style>
	.tabHeader {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
		border-right: 0;
		cursor: pointer;
	}

	.tabHeader:last-child {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
	}

	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		border-bottom-color: #FFFFFF;
		background-color: #FFFFFF;
		color: #20a0ff;
	}

	.btnPad {
		width: 120px;
		text-align: center;
	}

	.btnChoose {
		width: 120px;
		text-align: center;
		border: 1px solid #20a0ff;
		color: #20a0ff;
	}
</style>
